<template>
  <div class="bg-white rounded-lg p-5 h-full">
    <div class="font-bold text-lg mb-4">双随机任务管理</div>
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
      <el-form-item prop="enterpriseName">
        <el-input
          v-model="queryParams.enterpriseName"
          placeholder="被监管单位"
          clearable
          @keyup.enter.native="search"
        />
      </el-form-item>
      <el-form-item prop="checkProfessionName">
        <el-input
          v-model="queryParams.checkProfessionName"
          placeholder="检查专业"
          clearable
          @keyup.enter.native="search"
        />
      </el-form-item>

      <el-form-item prop="supervisor">
        <el-input
          v-model="queryParams.supervisor"
          placeholder="监管员名称"
          clearable
          @keyup.enter.native="search"
        />
      </el-form-item>

      <el-form-item prop="params">
        <el-date-picker
          v-model="dateRange"
          clearable
          type="daterange"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>
    </el-form>

    <div class="mb-4">
      <el-button type="primary" icon="el-icon-search" @click="search"
        >搜索</el-button
      >
      <el-button icon="el-icon-refresh" @click="reset">重置</el-button>
      <el-button type="primary">导入</el-button>

      <el-button type="primary">下载导入模板</el-button>
    </div>

    <el-table v-loading="loading" border :data="dataList">
      <el-table-column type="index" width="50" align="center" label="序号" />
      <el-table-column
        label="被监督单位"
        align="center"
        prop="enterpriseName"
      />
      <!--<el-table-column label="信用代码" align="center" prop="creditCode" />-->
      <el-table-column
        label="检查专业"
        align="center"
        prop="checkProfessionName"
        width="180px"
      >

      </el-table-column>
      <el-table-column label="镇/街道" align="center" prop="town" />
      <el-table-column label="经营地址" align="center" prop="addr" />
      <el-table-column label="监督机构" align="center" prop="superviseOrg" />
      <el-table-column label="监督员" align="center" prop="supervisor" />
      <el-table-column
        label="计划完成时间"
        align="center"
        prop="planCompletionTime"
        width="150px"
      />
      <el-table-column label="执行状态" align="center" prop="implementStatus">
        <template slot-scope="scope">
          <dict-tag
            :options="dict.type.correction_status"
            :value="scope.row.implementStatus"
          />
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getDataList"
    />
  </div>
</template>

<script>
import { getDoubleRandomListAPI } from "@/api/zhangping/health-care/double-random";

export default {
  dicts: ["task_type", "enterprise_category", "correction_status","enterprise_info_type"],

  data() {
    return {
      // 遮罩层
      loading: true,
      total:0,
      // 日期范围
      dateRange: null,

      dataList: [],
      enterpriseInfoForm: {
        zpEnterpriseInfoIdList: [],
        planCompletionTime: undefined,
        supervisorId: undefined,
        supervisor: undefined,
      },

      enterpriseInfoList: undefined,

      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        supervisor: null,
        enterpriseName: null,
        taskType:0,
        checkProfessionName: null,
        supervisorId: undefined,
        checkProfession:'ylws',
        params: {
          beginMonitorTime: null,
          endMonitorTime: null,
        },
      },
    };
  },

  created() {
    this.getDataList();
  },
  methods: {
    /** 查询用户列表 */
    getDataList() {
      this.loading = true;

      this.queryParams.params.beginMonitorTime = this.dateRange
        ? this.dateRange[0]
        : null;
      this.queryParams.params.endMonitorTime = this.dateRange
        ? this.dateRange[1]
        : null;
      getDoubleRandomListAPI(this.queryParams)
        .then((response) => {
          this.dataList = response.rows;
          this.total = response.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },

    /** 搜索按钮操作 */
    search() {
      this.queryParams.pageNum = 1;
      this.getDataList();
    },
    /** 重置按钮操作 */
    reset() {
      this.$refs["queryForm"].resetFields();
      this.queryParams.params.beginMonitorTime = null;
      this.queryParams.params.endMonitorTime = null;
      this.search();
    },
  },
};
</script>
